<template>
  <el-col :span="3" :offset="1" class="nav-right">
    <div class="loginOrRegister" v-if="token==null">
      <div class="login"><router-link tag="li"  :to="{name:'Login'}"> 登录</router-link></div>
      <span class="sep">|</span>
      <div class="register"><router-link tag="li"  :to="{name:'Register'}"> 注册</router-link></div>
    </div>
    <router-link tag="div" class="avatar-block" v-if="token!=null" :to="{name:'Setting'}">
      <span class="avatar"><el-avatar :src="avatar"></el-avatar></span>
      <span class="accountName">{{accountName}}<i class="el-icon-arrow-down el-icon--right"></i></span>
    </router-link>
    <!--<div class="setting-block" v-if="token!=null">
      <el-dropdown @command="handleCommand">
        <span class="setting-block"><el-setting :src="setting"></el-setting></span>
        <span class="el-dropdown-link">{{accountName}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="information">信息录入</el-dropdown-item>
          <el-dropdown-item command="punch">打卡</el-dropdown-item>
          <el-dropdown-item command="recommend">食谱推荐</el-dropdown-item>
          <el-dropdown-item command="exit">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <Information :informationVisible="informationVisible" @closeDialog="closeOrOpenInformation"></Information>
    <Punch :punchVisible="punchVisible" @closeDialog="closeOrOpenPunch"></Punch>
    <Recommend :recommendVisible="recommendVisible" @closeDialog="closeOrOpenRecommend"></Recommend>-->
  </el-col>
</template>

<script>
    import Information from "@/components/common/setting/components/Information";
    import Punch from "@/components/common/setting/components/Punch";
    import Recommend from "@/components/common/setting/components/Recommend";

    import {mapState} from 'vuex';
    import {mapMutations} from 'vuex';
    export default {
      name: "NavRright",
      components: {Recommend, Punch, Information},
      data(){
          return {
            informationVisible:false,
            punchVisible:false,
            recommendVisible:false
          }
        },
        computed:mapState(["token","accountName","avatar"]),
        methods:{
          handleCommand(command) {
            switch (command) {
              case "information":this.closeOrOpenInformation();break;
              case "punch":this.closeOrOpenPunch();break;
              case "recommend":this.closeOrOpenRecommend();break;
              case "exit":this.exit();break;
            }
          },
          closeOrOpenInformation(){
            this.informationVisible=!this.informationVisible;
          },
          closeOrOpenPunch(){
            this.punchVisible=!this.punchVisible;
          },
          closeOrOpenRecommend(){
            this.recommendVisible=!this.recommendVisible;
          },
          exit(){
            this.setToken(null);
            sessionStorage.clear();
            this.$notify({
              title: '退出成功！',
              type: 'success'
            });
          },
          ...mapMutations(['setToken','setAccountName']),
        },
        mounted() {

        }
    }
</script>

<style scoped lang="stylus">
.nav-right
  position relative
  .loginOrRegister
    margin-top 25px
    position relative
    div
      display inline-block
      &:hover
        cursor pointer
        color #00CF7A
  .avatar-block
    height 70px
    cursor pointer
    position relative
    .accountName
      margin-top -20px
      position absolute
      left: 45px;
      bottom: 23px;
    .avatar
      display inline-block
      width 40px
      height 40px
      margin-top 20px
      position absolute
      left: -5px;
      top: -4px;
      >img
        width 40px
        height 40px
    /*.el-dropdown
      margin 25px auto
      color #fff*/
</style>
